폼 전송 구현하기

1. hidden 객체 생성하기

에디터에서 콘텐츠를 작성하는 것과는 별도로 폼(form)을 통해 전송할 hidden 객체가 필요합니다.

hidden 객체로는 주로 "input" 또는 "textarea"를 사용할 수 있으나, 크로스에디터는 작성된 콘텐츠의 내용을 소실 없이 전송할 수 있는 "textarea" 사용을 권장합니다.

또한 브라우저의 자바스크립트 기능이 비활성화 되어 있는 경우 또는 자바스크립트가 정상적으로 동작 하지 않는 환경에서 크로스에디터가 실행되지 않아 글을 작성할 수 없는 상황에서 정상적으로 글을 작성할 수 있도록 "textarea"를 함께 사용하는 것이 웹 접근성을 높여 주는 방법이며 W3C의 권고 사항입니다.

2. 크로스에디터 콘텐츠 작성 유무 확인하기

폼(form) 전송을 할 경우 콘텐츠의 내용 유무에 대한 구분이 필요한 경우가 있습니다.

이러한 경우 크로스에디터에서 제공하는 "IsDirty" 또는 "GetTextValue" API를 사용하여 구분할 수 있습니다.

"IsDirty" Method는 문서 내용이 변경된 경우 true값을, 문서 내용이 변경되지 않은 경우 false값을 반환합니다. 에디터 로딩 시 "SetDirty" Method를 설정 후 사용해야 합니다.

크로스에디터로 focus 이동은 "SetFocusEditor" Method를 사용합니다.

var CrossEditor = new NamoSE('namoeditor1');

CrossEditor.EditorStart();

CrossEditor.SetDirty(); //현재 문서 편집 상태 초기화

 

if(!CrossEditor.IsDirty()){ // 크로스에디터 안의 컨텐츠 입력 확인

    alert("에디터에 내용을 입력해 주세요!!");

    CrossEditor.SetFocusEditor(); // 크로스에디터 Focus 이동

    return false;

}

"GetTextValue" Method는 문서 안의 text 값을 반환하기 때문에 "IsDirty"와 같은 기능을 할 수 있습니다.

if(CrossEditor.GetTextValue () == ""){ // 크로스에디터 안의 콘텐츠 입력 확인

alert("에디터에 내용을 입력해 주세요 !!");

CrossEditor.SetFocusEditor(); // 크로스에디터 Focus 이동

return false;

}

3. 크로스에디터에서 작성한 콘텐츠의 내용 가져오기

크로스에디터에서 작성된 콘텐츠의 내용을 가져오려면 "GetValue" 또는 "GetBodyValue" API를 사용합니다.

HTML, XHTML 형식으로 값을 가져올 수 있습니다.

3-1. GetValue(): 작성한 내용 전체를 HTML형식으로 부터 까지 반환

document.getElementById("contents").value = CrossEditor.GetValue();

3-2. GetValue("XHTML"): XHTML 형식으로 부터 까지 반환

document.getElementById("contents").value = CrossEditor.GetValue("XHTML");

3-3. GetBodyValue(): 작성한 내용 중 HTML 형식으로 태그 안의 내용만 반환

document.getElementById("contents").value = CrossEditor.GetBodyValue();

3-4. GetBodyValue("XHTML"): XHTML 형식으로 태그 안의 내용만 반환

document.getElementById("contents").value = CrossEditor.GetBodyValue("XHTML");

4. 작성된 콘텐츠 내용 크로스에디터에 삽입하기 (수정하기 페이지 등)

콘텐츠 내용을 크로스에디터에 삽입할 경우에는 "SetValue"나 "SetBodyValue" API를 사용합니다.

단 크로스에디터에서 내용을 가져오는 Method와 삽입 Method는 서로 동일해야 합니다.

"GetValue"를 사용한 경우에는 "SetValue"를 사용하고, "GetBodyValue"를 사용한 경우에는 "SetBodyValue"를 사용해야 합니다.

또한 에디터를 초기화 후 바로 Method를 호출 시 환경에 따라 정상적으로 호출되지 않는 경우가 있습니다. 이

----------------------------------------------------------------------------